import React, { Component } from 'react';
import TodoItem from './TodoItem'
class TodoMain extends Component {
  render() {
    const { list, type } = this.props
    let showList = []
    if (type === 'active') {
      showList = list.filter(v => !v.done)
    } else if (type === 'completed') {
      showList = list.filter(v => v.done)
    } else {
      showList = list
    }
    return (
      <div>
        <section className="main">
          <input onChange={this.handleChange} checked={list.every(v => v.done)} id="toggle-all" className="toggle-all" type="checkbox" />
          <label htmlFor="toggle-all">Mark all as complete</label>
          <ul className="todo-list">
            {showList.map((item) => (
              <TodoItem {...this.props} key={item.id} item={item}></TodoItem>
            ))}
          </ul>
        </section>
      </div >
    );
  }
  handleChange = (e) => {
    // console.log(e.target.checked);
    this.props.checkAll(e.target.checked)
  }
}

export default TodoMain;
